<template>
  <div>
    <search-wrap
      :gridCol="{ span: 6 }"
      :formConfig="formConfig"
      @search="search"
    >
      <template v-slot:label="{ data }">
        <a-input v-model="data.label"></a-input>
      </template>
    </search-wrap>
    <basic-table>
      <div style="margin-bottom: 10px">
        <div style="margin-bottom:10px;">
          <a-button type="primary" @click="addHandler">
            新增
          </a-button>
        </div>
        <template v-if="hasSelected">
          <a-alert type="info" show-icon>
            <template slot="message">
              已选择
              <span class="ant-btn-link">
                {{ selectedRowKeys.length }}
              </span>
              项
              <span
                style="margin-left:10px;color:#ff4d4f;cursor: pointer;"
                class="ant-btn-link"
                @click="delSelectData"
              >
                删除选中
              </span>
            </template>
          </a-alert>
          <!-- {{ `Selected ${selectedRowKeys.length} items` }} -->
        </template>
      </div>
      <a-table
        :columns="columns"
        :data-source="data"
        :pagination="paging"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
        bordered
        :loading="loading"
        @change="tableChange"
      >
        <template slot="opt" slot-scope="text, record">
          <a-space>
            <span class="table-opt ant-btn-link" @click="editHandler(record)"
              ><a-icon type="edit" /> 编辑</span
            >
            <span
              class="table-opt table-opt-danger"
              @click="delHandler(record.id)"
              ><a-icon type="delete" /> 删除</span
            >
          </a-space>
        </template>
      </a-table>
    </basic-table>
    <a-drawer
      :title="title"
      placement="right"
      :closable="true"
      :maskClosable="false"
      :destroyOnClose="true"
      :visible="visible"
      @close="onClose"
      width="800"
    >
        <Edit  v-if="type === OPT_EDIT" :id="id" @load-data="loadData" @close="onClose"/>
        <Add v-if="type === OPT_ADD" @load-data="loadData" :dictType="dictType" @close="onClose"/>
    </a-drawer>
  </div>
</template>
<script>
import { OPT_ADD, OPT_EDIT, OPT_DETAIL } from "@/utils/const/enum.js";
import { getAction } from "@/utils/plugins/request";
import { handleTree } from "@/utils/func/array_to_tree";
import ListMixin from "@/mixins/basic/list";
import { departmentTypeArr } from "@/utils/const/enum";
import SearchWrap from "@/components/searchWrap";
import moment from "moment";
import Add from './add.vue'
// import Detail from './detail.vue'
import Edit from './edit.vue'
const treeData = [
  {
    name: "全部",
    id: "",
    children: [],
  },
];
const columns = [
  {
    dataIndex: "label",
    key: "label",
    title: "字典标签",
    align: "center",
  },
  {
    dataIndex: "type",
    key: "type",
    title: "字典类型",
    align: "center",
  },
  {
    dataIndex: "value",
    key: "value",
    title: "字典键值",
    align: "center",
  },
  {
    title: "操作",
    key: "opt",
    dataIndex: "opt",
    width: 140,
    scopedSlots: { customRender: "opt" },
  },
];

export default {
  name: "department",
  mixins: [ListMixin],
  props: {
    dictType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      OPT_ADD,
      OPT_EDIT,
      OPT_DETAIL,
      listUrl: "/system/dict/data/selectPageList",
      delUrl: "/system/dict/type/deleteOne",
      params: {
        type: this.dictType,
      },
      id: "",
      columns,
      formConfig: [
        {
          label: "字典标签",
          name: "label",
        }
      ]
    };
  },
  methods: {
    onSearch(searchStr) {
      if (!searchStr) {
        this.defaultExpandAll = false;
        this.key++;
        this.treeData = treeData;
        return;
      }
      getAction("/mbap-pp/rest/system/department/search_tree", {
        serachStr: searchStr,
      }).then((res) => {
        const data = res.data.map((item) => {
          item.isLeaf = item.isparent !== "true";
          return item;
        });
        this.treeData = handleTree(data);
        console.log(this.$refs.tree);
        this.defaultExpandAll = true;
        this.key++;
      });
    },
    openDictData(id) {
      this.id = id;
      this.title = "字典数据";
      this.visible = true;
      this.type = "DICT_DATA";
    },
  },
  components: {
    SearchWrap,
    Add,
    // Detail,
    Edit
  },
};
</script>
